// 更新时间
function updateTime() {
  const now = new Date()
  const timeStr = now.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  }).replace(/\//g, '-')
  document.getElementById('currentTime').textContent = timeStr
}

// 初始化图表
function initCharts() {
  // 饼图配置
  const pieChart = echarts.init(document.getElementById('pieChart'))
  pieChart.setOption({
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      right: '5%',
      top: 'center',
      textStyle: { color: '#fff' }
    },
    series: [{
      name: '人群画像',
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['40%', '50%'],
      color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C'],
      itemStyle: {
        borderColor: '#0C2E6D',
        borderWidth: 1
      },
      label: {
        show: false
      },
      data: [
        { value: 25, name: '学生' },
        { value: 20, name: '企业高管' },
        { value: 30, name: '职场人士' },
        { value: 15, name: '家庭主妇' },
        { value: 10, name: '退休人员' }
      ]
    }]
  })

  // 中国地图配置
  const chinaMap = echarts.init(document.getElementById('chinaMap'))
  chinaMap.setOption({
    geo: {
      map: 'china',
      aspectScale: 0.75,
      layoutCenter: ['50%', '50%'],
      layoutSize: '100%',
      itemStyle: {
        areaColor: {
          type: 'linear-gradient',
          x: 0,
          y: 0,
          x2: 1,
          y2: 1,
          colorStops: [{
            offset: 0, color: 'rgba(0,246,255,0.1)'
          }, {
            offset: 1, color: 'rgba(0,246,255,0.4)'
          }]
        },
        borderColor: '#00f6ff',
        borderWidth: 1,
        shadowColor: '#00f6ff',
        shadowBlur: 10
      },
      emphasis: {
        itemStyle: {
          areaColor: '#00f6ff',
          opacity: 0.2
        }
      },
      regions: [{
        name: '南海诸岛',
        itemStyle: {
          opacity: 0,
          label: { show: false }
        }
      }]
    },
    series: [{
      type: 'lines',
      coordinateSystem: 'geo',
      effect: {
        show: true,
        period: 4,
        trailLength: 0.1,
        symbol: 'circle',
        symbolSize: 4,
        color: '#00f6ff'
      },
      lineStyle: {
        color: '#00f6ff',
        width: 1,
        opacity: 0.3,
        curveness: 0.3
      },
      data: [
        {
          coords: [[116.4551, 40.2539], [121.4648, 31.2891]], // 北京-上海
          lineStyle: { color: '#00f6ff' }
        },
        {
          coords: [[116.4551, 40.2539], [113.5107, 23.2196]], // 北京-广州
          lineStyle: { color: '#00f6ff' }
        }
      ]
    }]
  })

  // 散点图配置
  const scatterChart = echarts.init(document.getElementById('scatterChart'))
  scatterChart.setOption({
    grid: {
      top: '15%',
      right: '5%',
      bottom: '15%',
      left: '15%'
    },
    xAxis: {
      type: 'category',
      data: ['3', '2', '7', '18', '19', '4', '10', '12', '6', '15', '9', '11', '13', '16'],
      axisLine: {
        lineStyle: { color: 'rgba(0,246,255,0.2)' }
      },
      axisLabel: { color: '#00f6ff' }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: { color: 'rgba(0,246,255,0.1)' }
      },
      axisLine: {
        lineStyle: { color: 'rgba(0,246,255,0.2)' }
      },
      axisLabel: { color: '#00f6ff' }
    },
    series: [{
      data: [15, 8, 12, 6, 9, 15, 12, 15, 8, 12, 15, 8, 9, 15],
      type: 'scatter',
      symbolSize: 8,
      itemStyle: {
        color: '#00f6ff',
        shadowColor: 'rgba(0,246,255,0.3)',
        shadowBlur: 10
      }
    }]
  })

  // 销售额折线图配置
  const salesChart = echarts.init(document.getElementById('salesChart'))
  salesChart.setOption({
    grid: {
      top: '15%',
      right: '5%',
      bottom: '15%',
      left: '15%'
    },
    xAxis: {
      type: 'category',
      data: ['一月', '二月', '三月', '四月', '五月', '六月'],
      axisLine: {
        lineStyle: { color: 'rgba(0,246,255,0.2)' }
      },
      axisLabel: { color: '#00f6ff' }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: { color: 'rgba(0,246,255,0.1)' }
      },
      axisLine: {
        lineStyle: { color: 'rgba(0,246,255,0.2)' }
      },
      axisLabel: { color: '#00f6ff' }
    },
    series: [{
      data: [30, 40, 45, 50, 35, 40],
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 8,
      lineStyle: {
        color: '#00f6ff',
        width: 2
      },
      itemStyle: {
        color: '#00f6ff'
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0, y: 0, x2: 0, y2: 1,
          colorStops: [{
            offset: 0,
            color: 'rgba(0,246,255,0.3)'
          }, {
            offset: 1,
            color: 'rgba(0,246,255,0)'
          }]
        }
      }
    }]
  })

  // 访问量折线图配置
  const visitsChart = echarts.init(document.getElementById('visitsChart'))
  visitsChart.setOption({
    grid: {
      top: '15%',
      right: '5%',
      bottom: '15%',
      left: '10%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
        lineStyle: {
          color: 'rgba(0, 246, 255, 0.3)'
        }
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      axisLine: {
        lineStyle: {
          color: 'rgba(0, 246, 255, 0.3)'
        }
      },
      axisLabel: {
        color: 'rgba(255, 255, 255, 0.8)',
        fontSize: 12
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          color: 'rgba(0, 246, 255, 0.1)'
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(0, 246, 255, 0.3)'
        }
      },
      axisLabel: {
        color: 'rgba(255, 255, 255, 0.8)',
        fontSize: 12
      }
    },
    series: [{
      data: [1800, 1200, 900, 600, 900, 1500, 1200],
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 8,
      lineStyle: {
        color: '#00f6ff',
        width: 2,
        shadowColor: 'rgba(0, 246, 255, 0.3)',
        shadowBlur: 10
      },
      itemStyle: {
        color: '#00f6ff',
        borderColor: '#fff',
        borderWidth: 2
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(0, 246, 255, 0.3)'
          },
          {
            offset: 1,
            color: 'rgba(0, 246, 255, 0)'
          }
        ])
      }
    }]
  })

  // 监听窗口大小变化
  window.addEventListener('resize', () => {
    pieChart.resize()
    chinaMap.resize()
    scatterChart.resize()
    salesChart.resize()
    visitsChart.resize()
  })
}

// 全屏功能
function initFullscreen() {
  const fullscreenBtn = document.getElementById('fullscreenBtn')
  const iconElement = fullscreenBtn.querySelector('i')

  // 切换全屏状态
  function toggleFullScreen() {
    if (!document.fullscreenElement) {
      // 进入全屏
      document.documentElement.requestFullscreen().catch(err => {
        console.log(`Error attempting to enable fullscreen: ${err.message}`)
      })
      iconElement.classList.remove('icon-fullscreen')
      iconElement.classList.add('icon-fullscreen-exit')
    } else {
      // 退出全屏
      if (document.exitFullscreen) {
        document.exitFullscreen()
        iconElement.classList.remove('icon-fullscreen-exit')
        iconElement.classList.add('icon-fullscreen')
      }
    }
  }

  // 监听全屏变化
  document.addEventListener('fullscreenchange', () => {
    if (!document.fullscreenElement) {
      iconElement.classList.remove('icon-fullscreen-exit')
      iconElement.classList.add('icon-fullscreen')
    }
  })

  // 添加点击事件
  fullscreenBtn.addEventListener('click', toggleFullScreen)
}

// 地图全屏功能
function initMapFullscreen() {
  const mapWrapper = document.querySelector('.map-wrapper')
  const mapFullscreenBtn = document.getElementById('mapFullscreenBtn')
  const iconElement = mapFullscreenBtn.querySelector('i')
  const chinaMap = echarts.init(document.getElementById('chinaMap'))

  function toggleMapFullscreen() {
    if (!document.fullscreenElement) {
      // 进入全屏
      mapWrapper.requestFullscreen().catch(err => {
        console.log(`Error attempting to enable fullscreen: ${err.message}`)
      })
      iconElement.classList.remove('icon-fullscreen')
      iconElement.classList.add('icon-fullscreen-exit')
      // 重新调整地图大小
      setTimeout(() => {
        chinaMap.resize()
      }, 300)
    } else {
      // 退出全屏
      if (document.exitFullscreen) {
        document.exitFullscreen()
        iconElement.classList.remove('icon-fullscreen-exit')
        iconElement.classList.add('icon-fullscreen')
        // 重新调整地图大小
        setTimeout(() => {
          chinaMap.resize()
        }, 300)
      }
    }
  }

  // 监听全屏变化
  document.addEventListener('fullscreenchange', () => {
    if (!document.fullscreenElement) {
      iconElement.classList.remove('icon-fullscreen-exit')
      iconElement.classList.add('icon-fullscreen')
      // 重新调整地图大小
      setTimeout(() => {
        chinaMap.resize()
      }, 300)
    }
  })

  // 添加点击事件
  mapFullscreenBtn.addEventListener('click', toggleMapFullscreen)
}

// 确保在页面加载完成后初始化所有图表
document.addEventListener('DOMContentLoaded', () => {
  // 加载中国地图数据
  fetch('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json')
    .then(response => response.json())
    .then(geoJson => {
      echarts.registerMap('china', geoJson)
      // 初始化所有图表
      initCharts()
    })
  initFullscreen()
  initMapFullscreen()
})

// 更新时间
setInterval(updateTime, 1000)
updateTime() 
